import React from 'react';
import { Row, Col, Spin } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import OrganizationTree from '@/components/OrganizationTree';
import RightHeader from './components/Header';
import RightStandard from './components/Standard';
import RightRank from './components/Rank';
import RightBudget from './components/Budget';
import RightWork from './components/Check';
import { detail } from '@/services/Organization';

class Organization extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      achieve: [], // 达标
      unachieve: [], // 未达标
      book: [], //书籍
      reader: [], // 读者
      statistics: {}, // 统计
      unitId: null,
      isSpinning: false
    }
  }

  /* 获取详情 */
  getDetail = async (id) => {
    try {
      this.setState({ 
        isSpinning: true,
        statistics: {}
      });
      const res = await detail({
        id,
        numItems: 4,
        numReaders: 4
      });
      const {
        achieve,
        unachieve,
        book,
        reader,
        numUnits,
        numRent,
        numAttend,
        numItems,
        numStudent
      } = res
      this.setState({
        achieve: achieve.splice(0, 4),
        unachieve: unachieve.splice(0, 4),
        book: book.map((item, index) => {
          item.status = index + 1;
          return item
        }),
        reader: reader.map((item, index) => {
          item.status = index + 1;
          return item
        }),
        statistics: {
          numUnits,
          numRent,
          numAttend,
          numItems,
          numStudent
        }
      })
    } catch (error) {

    } finally {
      this.setState({ isSpinning: false });
    }
  }

  /* 监听机构选择 */
  onUnitSelect = async (id) => {
    await this.getDetail(id)
    this.setState({ unitId: id });
  }

  render() {
    const { onUnitSelect } = this;
    const { unitId, achieve, unachieve, book, reader, statistics, isSpinning } = this.state;
    return (
      <PageContainer>
        <Row gutter={16}>
          <Col span={4}>
            <OrganizationTree select={onUnitSelect} />
          </Col>
          <Col span={20}>
            <Spin spinning={isSpinning}>
              <RightHeader statistics={statistics} />
              <Row gutter={16}>
                <Col span={12}>
                  <RightStandard achieve={achieve} unachieve={unachieve} />
                </Col>
                <Col span={12}>
                  <RightRank book={book} reader={reader} />
                </Col>
                <Col span={24} style={{ marginBottom: 24 }}>
                  <RightBudget id={unitId} />
                </Col>
                <Col span={24}>
                  <RightWork id={unitId} />
                </Col>
              </Row>
            </Spin>
          </Col>
        </Row>
      </PageContainer>
    );
  }
}
export default Organization;
